<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>JSON数据实战--城市级联信息（源生开发）</h2>
    
    <select id="sid" name="c1">
        <option value="0">-请选择-</option>
    </select> - 
    <select id="cid" name="c2">
        <option value="0">-请选择-</option>
    </select>

    <script>
        
        // 获取上面第一个省级下拉框节点对象
        const snd = document.querySelector("#sid");
        // 获取上面第二个市级下拉框节点对象
        const cnd = document.querySelector("#cid");

        // 省级信息初始化（加载）
        function loadSid(){
            // 执行Ajax操作，加载省级信息
            // 1. 创建请求对象
            const xhr = new XMLHttpRequest();
            xhr.responseType = "json"; // 设置响应数据格式
            // 2. 设置请求信息
            xhr.open("GET", "/test06");
            // 3. 执行发送
            xhr.send();
            // 4. 响应处理（绑定请求状态回调函数）
            xhr.onreadystatechange = function(){
                // 判断当前请求状态为4，响应状态为200
                if(xhr.readyState == 4 && xhr.status == 200){
                    // 获取响应结果
                    const data = xhr.response;
                    console.log(data);
                    // 遍历data省级信息
                    data.forEach(item => {
                        // 创建一个option节点
                        let option = document.createElement("option");
                        option.setAttribute("value",item.id);
                        option.innerHTML = item.name;
                        // 将当前节点添加到下拉框中
                        snd.appendChild(option);
                    });
                }
            };
        }
        // 执行函数
        loadSid();

        // 为省级下拉框添加选择改变事件
        snd.onchange = function(){
            //alert(snd.value);
            // 获取选择的省级id
            let sid = snd.value;
            
            // 清空市级下拉信息
            cnd.length = 1; //设置select下拉框中的下拉项数量(多了会被截取)
            if(sid == 0) return;
            // 调用下面自定义的myAjax函数，完成对应城市信息加载
            myAjax("GET","/test06","pid="+sid, (err,result) => {
                if(err) throw err;
                // 获取响应结果
                const data = JSON.parse(result);
                console.log(data);
                // 遍历datac市级信息
                data.forEach(item => {
                    // 创建一个option节点
                    let option = document.createElement("option");
                    option.setAttribute("value",item.id);
                    option.innerHTML = item.name;
                    // 将当前节点添加到下拉框中
                    cnd.appendChild(option);
                });
            });
        }
        

        // 如下的注释采用的是js的文档注释：https://www.jsdoc.com.cn/

        /**
         * 自定义Ajax封装函数
         * @param {String} method 请求方法可以是GET或POST
         * @param {String} url   请求url地址
         * @param {String} data  请求参数：格式: "name=zhangsan&sex=20"
         * @param {Function} callback  回调函数
         */
        function myAjax(method, url, data, callback){
            // 1. 创建请求对象
            const xhr = new XMLHttpRequest();
            // 2. 设置请求信息
            // 判断method
            if(method == "GET"){
                xhr.open(method, url+"?"+data);
                // 3. 执行发送
                xhr.send();
            }else{
                xhr.open(method, url);
                // 设置请求头信息 Content-Type ，支持post参数提交
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                // 3. 执行发送
                xhr.send(data);
            }
            
            // 4. 响应处理（绑定请求状态回调函数）
            xhr.onreadystatechange = function(){
                // 判断当前请求状态为4，响应状态为200
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        callback(null, xhr.response);
                    }else{
                        callback(xhr.status,"请求失败！");
                    }
                }
            }
        }


        // 测试
        // myAjax("POST","/test02","m1=100&m2=200", function(err,data){
        //     if(err) throw data;
        //     console.log(data);
        // });
    </script>
</body>
</html>